1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
6 | <title>Animation Tweaker</title>
|
7 | <style type="text/css">
|
8 | html, body {
|
9 | margin: 0;
|
10 | padding: 0;
|
11 | width: 100%;
|
12 | height: 100%;
|
13 | overflow: hidden;
|
14 | }
|
15 | body {
|
16 | background-color: black;
|
17 | color: white;
|
18 | }
|
19 | canvas {
|
20 | display: block;
|
21 | margin: auto;
|
22 | position: absolute;
|
23 | right: 0;
|
24 | bottom: 0;
|
25 | left: 0;
|
26 | padding: 0;
|
27 | -webkit-user-select: none;
|
28 | -moz-user-select: none;
|
29 | -ms-user-select: none;
|
30 | -o-user-select: none;
|
31 | user-select: none;
|
32 | }
|
33 | #loader {
|
34 | background-color: #333;
|
35 | padding: 1em;
|
36 | }
|
37 | #controls {
|
38 | padding: 1em;
|
39 | }
|
40 | </style>
|
41 | </head>
|
42 | <body>
|
43 | <canvas id="game" width="1136" height="640"></canvas>
|
44 | <script type="text/javascript" src="../splat.js"></script>
|
45 | <script type="text/javascript" src="animation.js"></script>
|
46 |
|
47 | <div id="loader">
|
48 | <div>
|
49 | File: <input id="file" type="file" />
|
50 | </div>
|
51 | <div>
|
52 | Frames: <span id="frames">1</span>
|
53 | </div>
|
54 | <div>
|
55 | ms per frame: <input id="msPerFrame" type="text" value="100" />
|
56 | </div>
|
57 | </div>
|
58 | <div id="controls">
|
59 | <div>
|
60 | Width: <input id="width" type="text"/>
|
61 | </div>
|
62 | <div>
|
63 | Height: <input id="height" type="text"/>
|
64 | </div>
|
65 | <div>
|
66 | Offset X: <input id="offsetX" type="text"/>
|
67 | </div>
|
68 | <div>
|
69 | Offset Y: <input id="offsetY" type="text"/>
|
70 | </div>
|
71 | <div>
|
72 | <label><input id="running" type="checkbox" checked="checked"/> Running</label>
|
73 | <button id="step">Step</button>
|
74 | </div>
|
75 | <div>
|
76 | <span id="frameCounter" />
|
77 | </div>
|
78 | </div>
|
79 | </body>
|
80 | </html>
|